<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>在线支付</p>
		</header>

		<!-- 订单信息部分 -->
		<h3>订单信息：</h3>
		<div class="order-info">
			<p>
				{{orders.business.businessName}}
				<i class="fa fa-caret-down" @click="detailetShow"></i>
			</p>
			<p>&#165;{{orders.orderTotal}}</p>
		</div>

		<!-- 订单明细部分 -->
		<ul class="order-detailet" v-show="isShowDetailet">
			<li v-for="item in orders.list" :key="item.foodId">
			  <p>{{item.foodName}} x {{item.quantity}}</p>
			  <p>&#165;{{item.foodPrice*item.quantity}}</p>
			</li>
			<li>
				<p>配送费</p>
				<p>&#165;{{orders.business.deliveryPrice}}</p>
			</li>
		</ul>

		<!-- 支付按钮 -->
		<div class="payment-button">
			<button @click="pay()">确认支付</button>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
	name: 'Payment',
	data() {
		return {
			orderId: this.$route.query.orderId,
			orders: {
				business: {}
			},
			isShowDetailet: false
		}
	},
	created() {
		this.$axios.post('OrdersController/getOrdersById', this.$qs.stringify({
			orderId: this.orderId
		})).then(response => {
			this.orders = response.data;
		}).catch(error => {
			console.error(error);
		});
	},
	mounted() {
		// 防止返回到订单确认页面
		history.pushState(null, null, document.URL);
		window.onpopstate = () => {
			this.$router.push({path: '/index'});
		}
	},
	destroyed() {
		window.onpopstate = null;
	},
	methods: {
		detailetShow() {
			this.isShowDetailet = !this.isShowDetailet;
		},
		pay() {
			// 简化的支付逻辑
			if (confirm('确认支付 ¥' + this.orders.orderTotal + ' 吗？')) {
				// 这里可以添加实际的支付接口调用
				alert('支付失败，没钱了！');
				this.$router.push({path: '/orderList'});
			}
		}
	},
	components: {
		Footer
	}
}
</script>

<style scoped>
	/********** 总容器 **********/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/********** header **********/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/********** 订单信息部分 ***********/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw 4vw 0;

		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.wrapper .order-info {
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		color: #666;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-info p:last-child {
		color: orangered;
	}

	/********** 订单明细部分 **********/
	.wrapper .order-detailet {
		width: 100%;
	}

	.wrapper .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-detailet li p {
		font-size: 3vw;
		color: #666;
	}

	/********** 支付按钮 **********/
	.wrapper .payment-button {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
		margin-top: 8vw;
	}

	.wrapper .payment-button button {
		width: 100%;
		height: 12vw;
		border: none;
		outline: none;
		border-radius: 4px;
		background-color: #38CA73;
		color: #FFFFFF;
		font-size: 4.5vw;
		cursor: pointer;
	}

	.wrapper .payment-button button:hover {
		background-color: #2eb85c;
	}
</style>
